<!DOCTYPE html>
/
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid gold;
        }

        #div1{
            width: 200px;
            height: 200px;
        }


        #div2{
            width: 100px;
            height: 100px;
        }

        #div3{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="div1">
    div1
    <div id="div2">div2</div>
</div>
<!--<div id="div2">div2</div>-->
<!--<div id="div3">div3</div>-->

<!--<div class="cls1">div4</div>-->

<!--<div class="cls1">div5</div>-->
<a href="javaScript:void(0)" id="del">删除子节点</a>
<a href="javaScript:void(0)" id="add">添加子节点</a>
<script>
    /**
     * 超链接有两个功能
     *      1.可以被点击：样式
     *      2.点击到指定跳转到指定url
     *   需求：保留1功能  去掉2功能
     *   实现：href="javaScript:void(0);"
     * @type {HTMLElement}
     */
    //获取超链接
    var element_a = document.getElementById("del");
    //绑定事件
    element_a.onclick=function () {
        var div1 = document.getElementById("div1");
        div1.removeChild(document.getElementById("div2"))

    }
    var element_b = document.getElementById("add");
    //绑定事件
    element_b.onclick=function () {
        var div1 = document.getElementById("div1");
        //要添加子节点，先创建div,再把这个节点添加到某个div节点下，成为该节点的子节点
        var div3 = document.createElement("div");
        div3.setAttribute("id",div3)
        div1.appendChild(div3)

    }
</script>
</body>
</html>